// less中的注释有两种：
// 1.使用两个斜杠的注释，单行注释，这种注释不会被编译到css中
// 2.使用css的注释，多行注释 /* xxx */ 会被编译到css中

// 页面主题颜色变量
@color1: #333;

/* 头部的样式 */
.header{
    width: 400px;
    height: 100px;
    color: @color1;
    background-color: #ccc;
}

/* css3中的变量 */
:root{
    /* 全局变量 */
    --color1: pink;
}
.box h3{
    /* 局部变量 */
    --color2: blue;
    font-size: 20px;
    color: var(--color1);
    background-color: var(--color2);
}